<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-contact</title>
	<%@ include file="include/head.jsp" %>
	<meta charset="UTF-8">
	<title></title>
	
	<style type="text/css">
		
	
	</style>
</head>
<body class="crm">
	
	<jsp:include page="include/top.jsp">
		<jsp:param value="contact" name="tag"/>
	</jsp:include>
	
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span8">
				<div class="well screen">
					<div class="page-header header">

						<select id="type" name="type">
							<optgroup label="所有..."><option value="All">所有的联系人</option>
								<option value="Person">所有的个人</option>
								<option value="Company">所有的公司</option>
							</optgroup>
						</select>
					</div>
					
					<div class="live_search_spinner" behavior="spinner" id="parties_loading">
					  <div class="liner">
					    <h3>处理中...</h3>
					    <img src="./img/indicator.gif" alt="wait">
					  </div>
					</div>
					
					<div class="main" id="main">
						<!--应该是用于显示提示信息，比如删除或修该成功-->
						<div class="alert alert-success" style="display:none">
							<a class="close" data-dismiss="alert" href="https://1343817168.workxp.info/contacts#">×</a>
							<span></span>
						</div>
						
						<div class="filter-desc">
							可以通过以下条件来过滤联系人:
						</div>
						
						<div class="meta">
							<ul class="nav nav-pills contact-filter">
							
								<li class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
										名称<b class="caret"></b>
									</a>
									
									<ul class="dropdown-menu">
											<div class="dropdown-box">
												<form class="form-search contacts-search">
													<input type="text" class="input-small search-query" name="name">
													<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
												</form>
											</div>
									</ul>
								</li>
								
								<li class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
										职位<b class="caret"></b>
									</a>
									
									<ul class="dropdown-menu">
											<div class="dropdown-box">
												<form class="form-search contacts-search">
													<input type="text" class="input-small search-query" name="title">
													<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
												</form>
											</div>
									</ul>
							  </li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
									邮箱<b class="caret"></b>
								</a>
								
								<ul class="dropdown-menu">
										<div class="dropdown-box">
											<form class="form-search contacts-search">
										<input type="text" class="input-small search-query" name="ContactEmail">
												<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
									  </form>
										</div>
								</ul>
							  </li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
								电话<b class="caret"></b>
							</a>
							
							<ul class="dropdown-menu">
									<div class="dropdown-box">
										<form class="form-search contacts-search">
											<input type="text" class="input-small search-query" name="ContactPhone">
											<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
										</form>
									</div>
							</ul>
						  </li>
						  
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
								地址<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
									<div class="dropdown-box">
										<form class="form-search contacts-search">
											<input type="text" class="input-small search-query" name="ContactAddress">
											<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
										</form>
									</div>
							</ul>
						  </li>
						  
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
								背景信息<b class="caret"></b>
							</a>
							
							<ul class="dropdown-menu">
									<div class="dropdown-box">
										<form class="form-search contacts-search">
											<input type="text" class="input-small search-query" name="others">
											<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
										</form>
									</div>
							</ul>
						  </li>
						  
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
								网站<b class="caret"></b>
							</a>
							
							<ul class="dropdown-menu">
									<div class="dropdown-box">
										<form class="form-search contacts-search">
											<input type="text" class="input-small search-query" name="ContactWebsite">
											<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
										</form>
									</div>
							</ul>
						  </li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="serarch/contacts">
								IM<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
									<div class="dropdown-box">
										<form class="form-search contacts-search">
											<input type="text" class="input-small search-query" name="ContactIm">
											<button type="submit" class="btn" data-loading-text="处理中..">搜索</button>
										</form>
									</div>
							</ul>
						  </li>
					</ul>
				</div>
				
			<div class="filter-container" data="{}"></div>
			<div class="filter-template" data="">
				<a class="filter" name="" data="" href="serarch/contacts"><strong></strong></a>
			</div>
			
	<div id="table">
	
		<form accept-charset="UTF-8" action="https://1343817168.workxp.info/contacts/batch_action" class="simple_form form-inline" data-remote="true" id="batch_form" method="post" novalidate="novalidate">
		
			<input type="hidden" name="tag_id" value="" id="tag_id">
			<input type="hidden" name="contact_import_id" value="" id="contact_import_id">
			<input type="hidden" name="check_all_contacts" id="check_all_contacts">
			<input type="hidden" name="per_page" id="per_page" value="30">
			<input type="hidden" name="contact_num" id="contact_num" value="1">
			<input type="hidden" name="add_tag" id="add_tag_hidden">
			<input type="hidden" name="update_access_policy" id="update_access_policy_hidden">
			<input type="hidden" name="destroy" id="destroy_hidden">
			<input type="hidden" name="send_email" id="send_email_hidden">
			
			<div id="contact_actions_container">
			
				<div id="selection_tip">
					<div id="select_all_contacts_container" style="display:none">
						<a href="https://1343817168.workxp.info/contacts#">选择所有的联系人</a> ( 还有 -29 个联系人 )
					</div>
					<h5 id="selected_all_contacts" style="display:none">已经选择了所有联系人</h5>
				</div>
				
				<div class="selector">
					<span id="selection_summary"></span>
					<a href="javascript:;" id="toggle_link">全选</a>
				</div>
				
				<div id="party_selection_controls">
				
					<div id="summaries">
						勾选联系人后可以批量添加标签、修改访问权限、删除和群发邮件
					</div>
					
					<div id="contact_actions">
						<a id="add_tag_link" data_action="add_tag" class="action">添加类型</a>
						<a id="update_access_policy_link" data_action="update_access_policy" class="action">修改访问权限</a>
						<a id="destroy_link" data_action="destroy" class="destroy action">删除</a>
						<a id="send_email_link" data_action="send_email" class="action">群发邮件</a>
					</div>
					
				</div>
				
				<div id="party_selection_activities" style="display:none">
					<div id="confirm_add_tag" class="display_none confirm_action">
						<div class="actions">
							<input type="text" name="tag_name" placeholder="一次添加一个类型..." id="tag" autocomplete="off" class="required">
							<span class="submit">
								<button id="submit_add_tag" type="submit" class="btn btn-primary" data-loading-text="处理中..">
									<li class="icon-tag icon-white"></li> 添加
								</button>
								<a class="btn" href="#" onclick="toggle_action(add_tag); return false;">取消</a>
							</span>
						</div>
					</div>
					
					<div id="confirm_update_access_policy" class="display_none confirm_action">
						
						<div class="message">
							<h4>谁可以看见这些联系人？</h4>
						</div>
						
						<div class="actions">
							
							<div id="select_access_policy_for__" class="select_access_policy">
								<div class="radio scope activated">
									<input checked="checked" id="contact_access_policy_attributes_scope_everyone" name="contact[access_policy_attributes][scope]" type="radio" value="Everyone"> 所有同事
								</div>
								<div class="radio scope ">
									<input id="contact_access_policy_attributes_scope_owner" name="contact[access_policy_attributes][scope]" type="radio" value="Owner"> 只有我能看见
									<input id="contact_access_policy_attributes_owner_id" name="contact[access_policy_attributes][owner_id]" type="hidden" value="6641">
								</div>
							<div class="radio scope  hide">
								<input class="adhoc_group_ids" id="contact_access_policy_attributes_user_ids" name="contact[access_policy_attributes][user_ids]" type="hidden">
								<input id="contact_access_policy_attributes_scope_adhocgroup" name="contact[access_policy_attributes][scope]" type="radio" value="AdhocGroup"> 选择同事...
								<div class="editor">
									<div class="adhoc_group_member template" style="display: none;">
										<select disabled="disabled" id="user_ids_" name="user_ids[]"></select> 
										<span class="sprite remove" style="display:inline-block;background: url(/assets/workxp_sprites.png) no-repeat scroll -189px -181px transparent; width: 14px; padding-top: 14px;" title="" id=""></span>
										<span class="sprite add" style="display:inline-block;background: url(/assets/workxp_sprites.png) no-repeat scroll -189px -197px transparent; width: 14px; padding-top: 14px;" title="" id=""></span>
									</div>
									<div class="adhoc_group_members"></div>
								<select class="new_adhoc_group_member" id="" name=""><option value="" selected="selected">选择一个同事...</option></select> 
								</div>
							</div>
					</div>
<!--用于修改访问权限的ajax
<script>
	var container = $('#select_access_policy_for__');
	$('.scope input[type=radio]', container).live('click', function(event) {
    var activated = $(event.target).parent();
    $('.scope.activated', container).removeClass('activated')
    activated.addClass('activated');
		changePermission()
  });

	$('.scope select.named_group', container).live('change', function() {
		changePermission()
	})

  AdhocGroupMember.menu = $('select.new_adhoc_group_member', container)
	AdhocGroupMember.menu.live('change', function() { AdhocGroupMember.insert() });
	
	function changePermission() {
	  container.trigger('permission:change', [viewers()]);
	}
	
	function viewers() {
	  switch ($('.scope.activated input[type=radio]', container).val()) {
	  case 'Owner':
	    return [];
	  case 'NamedGroup':
	    return namedGroupMembers();
	  case 'AdhocGroup':
	    return adhocGroupMembers();
	  default:
	    return everyone();
	  }
	}
	
	function adhocGroupMembers() {
		return $('.adhoc_group_members .adhoc_group_member select', container).map(function(index, menu){ return $(menu).val() });
	}
	
	function everyone() {
	  return $('option', AdhocGroupMember.menu).map(function(index, option){
	    if ($(option).val()) return $(option).val();
	  });
	}
	
	function namedGroupMembers() {
	  return namedGroups()[$('select.named_group', container).val()] || [];
	}
	
	function namedGroups() {
	  return $.parseJSON($('.named_groups_data', container).attr('data'));
	}
	
	function updateUserIds() {
		var ids = $.makeArray(adhocGroupMembers())
		ids.push('6641')
		ids = ',' +  ids.join(',') + ','
		$('.scope .adhoc_group_ids', container).val(ids)
		changePermission()
	}
	
  function AdhocGroupMember(member) {
		$('select', member).live('change', updateUserIds);
    $('span.sprite.remove', member).live('click', function(){ AdhocGroupMember.remove(member); });
    $('span.sprite.add'   , member).live('click', function(){ AdhocGroupMember.add(member);    });
    return member;
  }

	AdhocGroupMember.remove = function(member) {
    var removed = member.remove()
    var members = $('.adhoc_group_members .adhoc_group_member', container)
    if (members.length === 0) {
      AdhocGroupMember.activateMenu()
    } else {
      if (removed.hasClass('last')) members.last().addClass('last')
    }
		updateUserIds()
  }

  AdhocGroupMember.add = function(lastMember) {
    lastMember.removeClass('last')
    AdhocGroupMember.activateMenu()
  }

  AdhocGroupMember.insert = function() {
    if ($.trim($(AdhocGroupMember.menu).val()) != '' && $.inArray($(AdhocGroupMember.menu).val(), adhocGroupMembers()) < 0) {
      $('.adhoc_group_members .last.adhoc_group_member', container).removeClass('last')
      $('.adhoc_group_members', container).append(AdhocGroupMember.create().addClass('last'))
      AdhocGroupMember.deactivateMenu()
			updateUserIds()
    } else {
      AdhocGroupMember.activateMenu()
    }
  }

  AdhocGroupMember.create = function() {
    var member = $('.adhoc_group_member.template', container).clone()
    member.removeClass('template').show()
		$('select', member).removeAttr('disabled').val($(AdhocGroupMember.menu).val())
    return AdhocGroupMember(member)
  }

  AdhocGroupMember.activateMenu = function() {
    var ids  = adhocGroupMembers()
    var menu = AdhocGroupMember.menu
    if (ids.length > 0) {
      menu.children().first().html('添加同事...')
    } else {
      menu.children().first().html('选择一个同事...')
    }
    $(menu).val("")
    $(menu).removeAttr('disabled').show()
  }

  AdhocGroupMember.deactivateMenu = function() {
    $(AdhocGroupMember.menu).attr('disabled', 'disabled').hide()
  }
	
	
	changePermission()
</script>
-->

							<p class="submit">
								<button id="submit_update_access_policy" type="submit" class="btn btn-warning" data-loading-text="处理中..">
									<li class="icon-lock icon-white"></li> 修改访问权限
								</button>
								<a class="btn" href="https://1343817168.workxp.info/contacts#" onclick="toggle_action(update_access_policy); return false;">取消</a>
							</p>
						</div>
					</div>
					
					<div id="confirm_destroy" class="display_none confirm_action">
						<div class="message">
				      <h4>您确定要删除这些联系人吗？</h4>
				      <p>所有与这个联系人相关的联系信息， 事件， 文件以及任务都将被删除。 删除后不能再恢复。</p>
				    </div>
						<div class="actions submit">
							<button id="submit_destroy" type="submit" class="btn btn-danger" data-loading-text="处理中..">
								<li class="icon-trash icon-white"></li> 我确定要删除这些联系人
							</button>
							<a class="btn" href="#" onclick="toggle_action(destroy); return false;">取消</a>
						</div>
					</div>
					<div id="confirm_send_email" class="display_none confirm_action">
						<div class="message">
				      <p>使用您电脑默认的邮件程序发送邮件，例如Mail、OutLook、Foxmail等。</p>
				    </div>
						<div class="actions submit">
							<button id="submit_send_email" type="submit" class="btn btn-primary" data-loading-text="处理中..">
								<li class="icon-envelope icon-white"></li> 确认
							</button>
							<a class="btn" href="#" onclick="toggle_action(send_email); return false;">取消</a>
						</div>
					</div>
				</div>
			</div>
			
			<!--用于显示联系人-->
			<table class="table crm-table" id="contacts">
				<thead>
					<tr>
						<td width="20px">
							<input id="id_" name="id[]" type="checkbox" value="774147"></td>
						<td width="35px">
						<a href="https://1343817168.workxp.info/contacts#" data-id="774147" class="quick-view">
							<span style="display: inline-block;border:1px solid #CCCCCC;background: url(&#39;/assets/workxp_sprites.png&#39;) no-repeat -112px -148px transparent; width: 32px; padding-top: 32px;font-size:1px">
							</span>
						</a>
						</td>
						<td width="50%">
							<h3>
								<a href="https://1343817168.workxp.info/people/774147">lxb9066</a>
								
								<span></span>
							</h3>
							<div class="info">
								<a href="mailto:lxb9066@gmail.com?bcc=dropbox%2B1343817168%40workxp.info">lxb9066@gmail.com</a>
								
							</div>
						</td>
						<td class="description">
							<h3>
							</h3>
							<div>
								<a class="label" href="https://1343817168.workxp.info/contacts/tagged_with?id=1508">内部通讯录</a>
							</div>
						</td>
					</tr>
					
					<c:choose>
						<c:when test="${empty contacts}">
							<h2 style="color:red ">暂无联系人,请<a href="${basePath }/contact/add.action?t=contact">添加联系人</a>或<a href="${basePath }/contact/add.action?t=company">添加公司</a></h2>
						</c:when>
						
						<c:otherwise>
							<c:forEach items="${contacts}" var="contact">
								<tr>
								<td width="20px">
									<input id="id_" name="id[]" type="checkbox" value="774147"></td>
								<td width="35px">
									<a href="https://1343817168.workxp.info/contacts#" data-id="774147" class="quick-view">
										<c:choose>
											<c:when test="${contact.companyname == null }">
												<span style="display: inline-block;border:1px solid #CCCCCC;background: url(${basePath}/img/workxp_sprites.png) no-repeat 0px -148px transparent; width: 32px; padding-top: 32px;font-size:1px">
											</c:when>
											<c:otherwise>
												<span style="display: inline-block;border:1px solid #CCCCCC;background: url(${basePath}/img/workxp_sprites.png) no-repeat -112px -148px transparent; width: 32px; padding-top: 32px;font-size:1px">
											</c:otherwise>
										</c:choose>
										
										</span>
									</a>
								</td>
								<td width="50%">
									<h3>
										<a href="show.action?id=${contact.id }">${contact.name }</a>
										
										<span></span>
									</h3>
									<div class="info">
										<c:forEach items="${contact.mailList }" var="mail">
											<a href="#">${mail.mail }</a>
										</c:forEach>
										
										
									</div>
								</td>
								<td class="description">
									<h3>
									</h3>
									<div>
									</div>
								</td>
								</tr>
							</c:forEach>
						</c:otherwise>
					</c:choose>
					
				</thead>
			</table>
		</form>			
	</div>

<!--  
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$.get('/contacts/tags', function(data) {
			$('#tags_container').html(data);
		}, 'html');
		
		$.get('/contacts/recent_imports', function(data) {
			$('#recent_imports').html(data);
			$("#recent_imports").has("div.title").addClass("well");
		}, 'html');
		
		$.get('/contacts/tags.json', function(data) {
			$('#tag').typeahead({ source: data })
		});
		
		init_contacts_action();
		
		ContactQuickShow.init();
		new ContactsFilter();
		
		$('#type').change(function() {
			$('body').addClass('loading');
			var filters = $(".filter-container").data("filters");
			var filter_str = '';
			if(filters) {
				filter_str = $.param(filters);
			}
			$.get('/contacts?filter=on&page=1&' + filter_str, {type: this.value}, updateContacts, 'html');
		});
		
		$("a.export").click(function(e) {
			e.preventDefault();
			var url = $(this).attr("href");
			window.location.href = url + '?c=' + $("#contact_num").val();
		});
	});
</script>
-->

					</div>
				</div>
			</div>
			<div class="span4 sidebar">
				<div class="well">
					<ul id="inout">
						<li><a href="#contact/new">添加联系人</a></li>
						<li><a href="#company/new">添加公司</a></li>
						<li><a href="contact_imports">导入联系人</a></li>
						<li><a class="export" href="contact_exports/new">导出联系人</a></li>
					</ul>
				</div>
				<div id="recent_imports" class="">
					<ul class="unstyled"></ul>
				</div>
				<div id="tags_container">
					<div id="tags_one_by_one" class="well">
						<div class="title">
							<span style="float:right">
								
							</span>
							<i class="icon-tags"></i> 按类型查询
						</div>

						<table class="table crm-table tags">
							<tbody><tr>
								<td style="width:12px;"><strong>N</strong></td>
								<td>
									<a class="label" href="https://1343817168.workxp.info/contacts/tagged_with?id=1508">内部通讯录</a>
								</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div id="tags_combination" style="display:none" class="well">
						<div class="title">
							<span style="float:right;">
								
							</span>
							<i class="icon-tags"></i> 多选标签
						</div>
						<div style="padding:2px 5px">点击另一个标签进行过滤</div>
						
						<table class="table crm-table tags">
								<tbody>
									<tr>
										<td style="width:12px;"><strong>N</strong></td>
										<td>
											<a class="label" href="https://1343817168.workxp.info/contacts/tagged_with?id=1508">内部通讯录</a>
										</td>
									</tr>
								</tbody>
						</table>
					</div>
				</div>

				</div>
			</div>
		</div>	
</body>
</html>
